import React, { useState } from 'react';
import { Form, Input, Select,Button,Row,Col,Space} from 'antd';
import 'antd/dist/antd.css';


const FormSizeDemo = () => {
    const [componentSize, setComponentSize] = useState('default');

    const onFormLayoutChange = (size :any ) => {
        setComponentSize(size);
    };

    const layout = {
        labelCol:{span: 8 },
        wrapperCol:{ span: 16}
    };

    return (
        <div>
            <br/>
            <Form 
                {...layout}
                initialValues={{ size: componentSize }}
                onValuesChange={onFormLayoutChange}
               
                layout="inline"
            >
                <Row style={{width:'100%',padding:'0 35px'}}>
                    <Col span={20}>
                        <Row>
                            <Col span={8}>
                                <Form.Item label="代码/名称" name="codeName" rules={[{ message: '请输入代码或者名称!' }]}>
                                    <Input placeholder="请输入或者名称" />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="状态" >
                                    <Select>
                                        <Select.Option value="1">全部</Select.Option>
                                        <Select.Option value="2">启动</Select.Option>
                                        <Select.Option value="3">禁用</Select.Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Col>
                    <Col span={4}>
                            <Space style={{float:'right'}}>
                                <Button type="primary" htmlType="submit">
                                    查询
                                </Button>
                                <Button style={{ background: 'rgb(81, 97, 115)', color: 'rgb(255, 255, 255)'}} type="primary" htmlType="button">
                                    重置
                                </Button>
                            </Space>
                    </Col>
                </Row>
            </Form>
        <br/>
        </div>
    );
}
export default FormSizeDemo

